<template>
	<view>
		<view class="new-voice-wrap" @tap="goRecord"> 
			<view class="iconfont icon-shangchuan"></view>
			<view class="new-voice-test">录入新声音</view>
		</view>
		<view class="voice-list-wrap">
			<view v-for="(item,index) in voiceList" :key="index">
				<!-- 非管理非编辑状态，默认显示界面 -->
				<view class="voice-list" v-if="!isManage && !isEdit">
					<view class="voice-name">{{item.name}}</view>
					<view v-if="voiceId != item.id" class="tap-tab" @tap="switchVoice(index)">一键切换</view>
					<view v-else class="tap-tab">默认</view>
				</view>  
				<!-- 管理非编辑状态 -->
				<view v-else-if="isManage && !isEdit" class="voice-list"> 
					<view class="voice-name">{{item.name}}</view>
					<view class="manage">
						<view class="iconfont icon-bianji manage-icon" @tap="edit(item.name,index)"></view> 
						<view class="iconfont icon-shanchu manage-icon" @tap="deleteVoice(index)"></view>
					</view>
				</view>
				<!-- 管理编辑状态 -->
				<view v-else>
					<!-- 编辑第i个 -->
					<view  v-if="editing[index]"  class="voice-list">
						<input type="text" v-model="voiceName" value="voiceName" focus="true" @blur="cancel(index)"/>
						<view class="iconfont icon-duigou1 manage-icon" @tap="done(index)"></view>
					</view>
					<!-- 除i个其它都处于非编辑状态 -->
					<view v-else class="voice-list">
						<view class="voice-name">{{item.name}}</view>
						<view class="manage">
							<view class="iconfont icon-bianji manage-icon" @tap="edit(item.name,index)"></view> 
							<view class="iconfont icon-shanchu manage-icon" @tap="deleteVoice(index)"></view>
						</view>
					</view>
				</view>	
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRecord:false,
				isManage:false,//是否点击右上角的管理
				isEdit:false,//是否点击了编辑按钮
				editing:[],//第i个声音的编辑状态
				voiceName:"",//编辑时输入框内的声音名称
				voiceList:Array,//声音列表
				voiceId:''//当前用户使用的音色id
			}
		},
		onLoad() {
			//请求当前用户使用的音色信息
			uni.request({
				url:"http://yapi.demo.qunar.com/mock/82088/api/zVoice",
				success: (res) => {
					this.voiceId = res.data.content.id;
				}
			})
			const requestTask = uni.request({
			    url: 'http://yapi.demo.qunar.com/mock/82088/api/zVoice', 
			    success: (res) => {
					console.log(JSON.stringify(res.data.content))
					this.voiceList = res.data.content;
			    }
			});
			for(var i=0;i < this.voiceList.length;i++){
				this.editing[i] = false;
			};
		},
		methods: {
			//一键切换
			switchVoice(index){
				uni.request({
					url:'http://yapi.demo.qunar.com/mock/82088/api/zVoice/switch',
					data:{
						voiceId:this.voiceList[index].voiceId
					},
					success() {
						uni.showToast({
							title:'切换成功'
						})
					},
					fail() {
						uni.showToast({
							title:'网络错误，请稍后重试'
						})
					}
				})
			},
			//编辑完成
			done(index){
				console.log(this.voiceName);
				this.voiceList[index].name = this.voiceName;
				this.editing[index] = false;
				this.isEdit = false;
			}, 
			//点击编辑，音频名称
			edit(voiceName,index){
				console.log(voiceName+index);
				this.isEdit = true;
				this.voiceName = voiceName;
				this.editing[index]=true;
				console.log(this.editing)
			},
			//编辑框失焦，取消编辑
			cancel(index){  
				this.isEdit = false;
				this.editing[index] = false;
			},
			goRecord(){
				uni.navigateTo({
					url:"../recorder/recorder"
				})
			},
			deleteVoice(index){
				console.log(222)
				uni.showModal({
				    title: '提示',
				    content: '确定删除吗？',
				    success: (res) => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.request({
								url:'http://yapi.demo.qunar.com/mock/82088/api/zVoice',
								data:[this.voiceList[index].id]
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
		},
		onNavigationBarButtonTap(e) {
			this.isEdit = false;  
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();  
			this.isManage = !this.isManage;
			// 修改buttons   
			// index: 按钮索引, style {WebviewTitleNViewButtonStyles }  
			webView.setTitleNViewButtonStyle(0, {  
				text: this.isManage?'完成':'管理'
			});   
			// #endif  
		}
	}
</script>

<style>
page{
	background-color: #EEEEEE;
}
.manage{
	display: flex;
	justify-content: space-between;
	width: 90px;
}
.manage-icon {
	color: #FFA000;
	font-size: 35px;
}
.new-voice-wrap {
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	height: 80px;
	margin: 20px 0;
}
.icon-shangchuan {
	color: #FF8920;
}
.new-voice-test{
	font-size: 18px;
	color: #6A6A6A;
}
.voice-list-wrap{
	background-color: #FFFFFF;
	padding-bottom: 20px;
}
.voice-list {
	height: 50px;
	display: flex;
	align-items: center;
	margin: 0 40px;
	justify-content: space-between;
	border-bottom: 1px solid #D4D4D4;
}
.voice-name {
	font-size: 16px;
}
.tap-tab {
	font-size: 14px;
	background-color: #FFA000;
	border-radius: 6px;
	color: #FFFFFF;
	padding: 0 10px;
}
</style>
